{% extends "base.html" %}
{% block script %}
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var chat_token  = '{{chat_token}}';
        var channel     = new goog.appengine.Channel(chat_token);
        var socket      = channel.open();
        var not_read_cnt = 0;
        var sound_flag = 1;
        var focus_flag = -1;
        
        socket.onopen   = function(){
        };
        socket.onmessage= function(m){
            var data = $.parseJSON(m.data);
            if(data["msg"] =="join"){
                if($("#"+data['nick']).length == 0){
                    $('#id_userlist').append("<li id='"+data['nick']+"'>"+data['nick']+"</li>");
                    $("#id_chatcontents").append("<strong>"+data['nick']+"</strong> is joined.<br/>");
                }
                $("#id_chatcontents").show();
                $("#id_connect").remove();
                $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
            }
            else if(data['msg'] =='exit'){
                $("#id_"+data['nick']).remove();
                if($("#id_"+data['nick']).length == 0){
                       $('#id_chatcontents').append("<strong>"+data['nick']+"</strong> is out.<br/>");
                       $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
                }
            }
            else{
                var start_idx = data['msg'].indexOf("http");
                var http_flag = 1;
                if(start_idx < 0 ){
                    start_idx = data['msg'].indexOf("www");
                    http_flag = -1;                     
                }
                if(start_idx > -1){
                    var end_idx = data['msg'].indexOf(" ", start_idx);
                    if(end_idx < 0)
                       end_idx = data['msg'].length;
                    var link = data['msg'].substring(start_idx, end_idx);
                    if(http_flag < 0)
                       data['msg'] = data['msg'].replace(link, "<a href='http://"+link+"' target='_blank'>"+link+"</a>");
                    else
                       data['msg'] = data['msg'].replace(link, "<a href='"+link+"' target='_blank'>"+link+"</a>");
                }
                $("#id_chatcontents").append("<strong>"+data['nick']+"</strong>: "+data['msg']+"<br/>");
                $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
                
                if(focus_flag > 0){
                   not_read_cnt++;
                   document.title = "TunaCrew ("+String(not_read_cnt)+")";
                }
            }
        };
        socket.onerror  = function(err){
            //alert("JS Error:" + err['description']);
        };
        socket.onclose  = function(){
            
        };
        if($("#id_{{user.user_nickname}}").length != 0){
            $("#id_connect").remove();
            $("#id_chatcontents").show();
        }
        $("#id_chat").scrollTop($("#id_chat")[0].scrollHeight);
        
        $(window).focus(function(){
           document.title = "TunaCrew";
           not_read_cnt = 0;
           focus_flag = -1;
        });
        $(window).blur(function(){
           focus_flag = 1;
        });
    });
</script>
{% endblock %}
{% block userinfo %}
    <p id="user-info">
        <strong>{{ user.user_nickname }}</strong>, Welcome to Tuna Crew<br/>
        <a href="/change_pwd/">Change Password</a><br/>
        <a href="/logout/">Logout</a>
    </p>
{% endblock %}
{% block menu_home %}id="current"{% endblock %}
{% block contentwrap_id%}-noside{% endblock %}
{% block content %}
		<div id="main-noside">
			<h2><a href="/">TunaCrew is private community</a></h2>
	        <p>
	            Notice Post
	        </p>
	        <div class="block">
	            <h3>Notice</h3>
	            <form class="login" method="post" action=".">
	                <table id="id_table">
	                    <tr>
	                        <td class="login"><label for="id_subject">Subject: </label></td>
	                        <td><input type="text" name="subject" class="text" id="id_subject" /></td>
	                    </tr>
	                    <tr>
	                        <td><label for="id_content">Content: </label></td>
	                        <td><textarea name="content" class="text" id="id_content"></textarea></td>
	                    </tr>
	                    <tr>
	                        <td colspan="2" align="right"><input class="button" type="submit" value="OK" /></td>
	                    </tr>
	                </table>
	            </form>
	        </div>
		<!-- main ends -->	
		</div>
{% endblock %}
{% block bot_chat %}
{% include "footer_chat.html" %}
{% endblock %}